<template>
    <framework title="专业团队" :bg="require('@/assets/img/expert-header.png')"
               :path="[{name:'专业团队',path:'/expertTeam'}]" :wrap-style="{background: '#FFFFFF'}"
    >
        <div class="sq_professional">
            <div class="bottom" v-for="l in list">
                <div class="title_content">
                    <div class="title">
                        {{ l.category }}
                    </div>
                    <hr>
                </div>
                <div class="portrait_list">
                    <div class="head_portrait" v-for="law in l.lawList">
                        <div class="img">
                            <img :src="law.img" alt="">
                        </div>

                        <div class="head_content">
                            <div class="user_name f2">
                                {{ law.username }}
                            </div>
                            <div class="story f3" v-html="law.introduce"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </framework>
</template>

<script>

//专业团队

import framework from '@/components/framework'

export default {
    name: "ExpertTeam",
    components: {framework},
    data() {
        return {
            list: []
        }
    },
    mounted() {
        this.getPageInfo();
    },
    methods: {
        async getPageInfo() {
            let data = await this.$http.get("/business/findAll");
            let lawData = await this.$http.get("/lawerInfo/list");
            this.list = data.categoryList.map(c => {
                return {category: c.label, lawList: lawData.page.list.filter(l => l.businessId === c.value)}
            }).filter(c => c.lawList.length)
        }
    }
}
</script>

<style scoped lang="less">

.sq_professional {
    .bottom {
        .title_content {
            margin: 80px auto;
            border-top: 1px solid #707070;
            position: relative;

            .title {
                width: 171px;
                height: 40px;
                background: #FFFFFF;
                text-align: center;
                line-height: 40px;
                color: #707070;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }

        .portrait_list {
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            //grid-template-columns:repeat(3,1fr);
            //grid-gap: 48px;
            .head_portrait {
                width: 369px;
                .img {
                    width: 100%;
                    height: calc(100% - 68px);
                    img{
                        display: inline-block;
                        max-width: 100%;
                        max-height: 100%;
                        vertical-align: middle;
                    }
                }
                .head_content {
                    z-index: 2;
                    .user_name {
                        margin-top: 13px;
                        font-weight: bold;
                    }

                    .story {
                        margin-top: 6px;
                        font-weight: 400;
                        text-indent: 2rem;
                        overflow: hidden;
                        word-break: break-all;
                        display: -webkit-box;
                        -webkit-line-clamp: 2; /* 指定行数*/
                        -webkit-box-orient: vertical;
                    }
                }
            }
        }
    }
}
</style>

<style lang="less">
@media screen and (min-width: 0px) and (max-width: 680px) {
    #app {
        .sq_professional {
            .bottom {
                .title_content {
                    margin: 80px 0;

                    .title {
                        font-size: 17px;
                        width: 50%;
                    }
                }

                .portrait_list {
                    flex-direction: column;

                    .head_portrait {
                        width: 100%;


                        .head_content {
                            top: 80%;
                            height: 20%;
                        }
                    }
                }
            }
        }
    }
}
</style>
